import {
    View, Text, Dimensions, Image, TouchableOpacity,
    Alert, ImageBackground, StyleSheet, WebView,
} from 'react-native';
import React, {Component} from 'react';
import LocalImg from '../const/Images'

const {width, height} = Dimensions.get("window");

class PageQxsjDetail extends Component {

    constructor(props) {
        super(props);
        this.url = this.props.navigation.getParam('url');
        this.state = {
            visibility: 1,
            loadingError: false,
            area: 0,
            hish: ""
        }
    }

    render() {
        return (
            <View style={{width: width, height: height, flexDirection: 'column', backgroundColor: '#ffffff'}}>
                {this.renderHeader()}
                {
                    <WebView
                        style={{flex: 1, opacity: this.state.visibility}}
                        ref="webView"
                        startInLoadingState={true}
                        renderError={this.onLoadingError}
                        javaScriptEnabled={true}
                        domStorageEnabled={true}
                        source={{uri: this.url}}
                        onNavigationStateChange={(e) => this.handleNavigationStateChange}
                        onLoadStart={() => this.handleOnLoadStart}
                        onLoad={() => this.handleOnLoad}
                    />
                }
            </View>

        )
    }


    renderHeader() {
        return (
            <View style={{
                flexDirection: 'row',
                flex: 0,
                height: 60,
                alignItems: 'center',
                justifyContent: 'center',
                backgroundColor: '#0066FF'
            }}>
                <View style={{flex: 1, padding: 10}}>
                    <TouchableOpacity onPress={() => this.props.navigation.pop()}>
                        <Image source={LocalImg['backImg']} style={{height: 30, width: 30, resizeMode: 'contain'}}/>
                    </TouchableOpacity>
                </View>
                <View style={{flex: 3, justifyContent: 'center', alignItems: 'center'}}>
                    <Text style={{fontSize: 20, color: '#ffffff'}}>天气详情</Text>
                </View>
                <View style={{flex: 1, alignItems: 'flex-end', padding: 10}}>
                </View>
            </View>
        )
    }

    onLoadingError() {
        return (
            <View>
                <Text>数据加载失败，请重试</Text>
            </View>
        )
    }

    handleNavigationStateChange() {
        const url = e.url;
        if (url.indexOf('?') !== -1) {
            const t = url.substring(url.indexOf('?') + 1);
            this.setState({
                hish: t
            });
        }
    }


    handleOnLoadStart() {
        this.setState({
            visibility: 0
        })
    }

    handleOnLoad() {

    }


}

export default PageQxsjDetail;